import React from 'react';
import { BrowserRouter as Router, Route, Switch ,Redirect } from 'react-router-dom';
import MainLayout from './Layouts/MainLayout'
import Home from './views/Home'
import Cart from './views/Cart'
// import Mine from './views/Mine'
import GoodsDetails from './views/GoodsDetails'
import Pay from './views/Pay'
import Login from './views/Login'
import Register from './views/Register'
// 私有权限路由
import Container from "./components/Container";

function App() {
  {/* render函数渲染的组件需要接收路由对象的属性需要传递props参数，并利用...在组件的属性位置展开。Home/Cart/Mine组件都有公共的TabBar，所以都需要利用MyLayout包裹 */}
  return (
    <Router>
      <div style={{ height: '100%' }}>
        <Switch>
          {/* 首页  exact精确的匹配 */}
          <Route path='/' exact render={(props) => (<MainLayout {...props}> <Home></Home></MainLayout>)}></Route>
          {/* 购物车 */}
          <Route path='/cart' render={(props) => (<MainLayout {...props}> <Cart {...props}></Cart></MainLayout>)}></Route>
          {/* 我的 */}
          <Route path='/mine' render={(props) => (<MainLayout {...props}> <Container></Container></MainLayout>)}></Route>
          {/* 商品详情页 */}
          <Route path='/goodsDetails/:id' render={(props) => (<GoodsDetails {...props}></GoodsDetails>)}></Route>
          {/* 确认下单 */}
          <Route path="/pay" render={(props) => <Pay {...props}></Pay>}></Route>
          {/* 登录 */}
          <Route path="/login" render={(props) => <Login {...props}></Login>}></Route>
          {/* 注册 */}
          <Route path="/register" render={(props) => <Register {...props}></Register>}></Route>
          {/* 404 */}
          <Route path='/404' render={() => (<h3>当前页面在火星</h3>)}></Route>
          {/* 重定向 */}
          <Redirect to='/404'></Redirect>
      </Switch>
    </div>
    </Router>
  );
}

export default App;
